<template>
    <view class="sticky-top">
        <han-status-bar />
        <home-header />
    </view>
    <view class="home">
        <home-content ref="homeContentRef" />
    </view>
    <han-tabbar />
</template>

<script setup>
import { ref } from 'vue';
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import homeHeader from './components/homeHeader.vue';
import homeContent from './components/homeContent.vue';

const homeContentRef = ref();

// 页面下拉刷新
onPullDownRefresh(() => {
    if (homeContentRef.value) {
        homeContentRef.value.onRefresh();
    }
    uni.stopPullDownRefresh();
});

// 页面触底
onReachBottom(() => {
    if (homeContentRef.value) {
        homeContentRef.value.onLoadMore();
    }
});
</script>

<style lang="scss">
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 100;
    background: $han-global-bg-color;
}

// 移除 .home 的 height 和 overflow
.home {
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}
</style>
